<template>

  <div class="box-shadow dev formList">
    <div>
      <el-form ref="form1" :model="form" :rules="rules" label-width="80px">
        <div>
          <i class="icon2"></i>
          <div class="headline2">
            <span>经营信息</span>
          </div>
        </div>

        <div class="dev2">
          <el-form-item label="商户简称" prop="merchant_shortname">
            <el-input v-model="form.merchant_shortname"></el-input>
          </el-form-item>

          <el-form-item label="客服电话" prop="service_phone">
            <el-input v-model="form.service_phone"></el-input>
          </el-form-item>

          <el-form-item label="经营类型" required>
            <el-checkbox v-model="isApplets" @change="handleAppletsChange"
            >小程序
            </el-checkbox>
            <el-checkbox v-model="isPublic" @change="handlePublicChange"
            >公众号
            </el-checkbox>
          </el-form-item>
        </div>
      </el-form>
      <div v-if="isApplets == true">
        <div>
          <i class="icon1"></i>
          <div class="headline1">
            <span>小程序</span>
          </div>
        </div>
        <el-form
          v-if="form.sales_info"
          ref="form2"
          :model="form.sales_info.mini_program_info"
          :rules="rules2"
          label-width="120px"
        >
          <div class="dev3">
            <el-form-item
              label="商家APPID"
              prop="mini_program_sub_appid"
            >
              <el-input v-model="mini_program_sub_appid"></el-input>
            </el-form-item>
            <el-form-item label="小程序截图" prop="mini_program_pics">
              <imageUpload
                v-model="wechatImg.mini_program_pics"
                :mediaId.sync="
                  form.sales_info.mini_program_info.mini_program_pics
                "
                :imageStr.sync="miniProgramPics"
                size="5"
              ></imageUpload>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <div v-if="isPublic == true">
        <i class="icon1"></i>
        <div class="headline1">
          <span>公众号</span>
        </div>
      </div>
      <div class="dev4" v-if="isPublic == true">
        <el-form
          ref="form3"
          :model="form.sales_info.mp_info"
          :rules="rules3"
          label-width="120px"
        >

          <el-form-item
            label="商家APPID"
            label-width="120px"
            prop="mp_sub_appid"
          >
            <el-input v-model="mp_sub_appid"></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 20px;" label="公众号截图" label-width="100px" prop="mp_pics">
            <imageUpload
              v-model="wechatImg.mpPics"
              :mediaId.sync="form.sales_info.mp_info.mp_pics"
              :imageStr.sync="mpPics"
              size="5"
            ></imageUpload>
          </el-form-item>
        </el-form>
      </div>

      <!-- <el-form-item> -->
      <div style="margin-left: 70%; margin-bottom: 20px">
        <el-button
          type="primary"
          @click="submitForm"
          style="margin-bottom: 20px"
        >提交并保存
        </el-button>
        <el-button @click="returnIndex">返回</el-button>
      </div>
      <!-- </el-form-item> -->
    </div>
  </div>
</template>

<script>
  import {
    getPayAudit,
    addBusinessInfo,
    getBusinessInfo,
    getAppId
  } from "@/api/applet/payAudit";
  import imageUpload from "@/components/ImageUpload/wechatImgLsit";

  export default {
    //import 引入的组件需要注入到对象中才能使用
    components: {imageUpload},
    props: {
      //组件传值
      businessInfoStr: {
        type: Boolean,
        default: true,
      },
      indexStr: {
        type: Boolean,
        default: true,
      },
      businessCodeStr:{
        type: String,
        default: '',
      }
    },
    data() {
      //这里存数据
      return {
        //授权单对象
        payAudit:{},
        miniProgramPics: "",
        mpPics: "",
        mini_program_appid: "",
        mini_program_sub_appid: "",
        mp_appid: "",
        mp_sub_appid: "",
        radio: "1",
        radio1: "1",
        //小程序
        isApplets: true,
        //公众号
        isPublic: false,
        wechatImg: {
          //小程序截图
          miniProgramPics: "",
          //公众号截图
          mpPics: "",
        },
        form: {},
        // 查询参数
        queryParams: {},
        // 表单校验
        rules2: {
          mini_program_sub_appid: [
            {
              required: true,
              message: "商家小程序APPID不能为空",
              trigger: "blur",
            },
          ],
          mini_program_pics: [
            {required: true, message: "小程序截图不能为空", trigger: "blur"},
          ],
        },
        rules3: {
          mp_appid: [
            {
              required: true,
              message: "服务商公众号APPID不能为空",
              trigger: "blur",
            },
          ],
          mp_sub_appid: [
            {
              required: true,
              message: "商家公众号APPID不能为空",
              trigger: "blur",
            },
          ],
          mp_pics: [
            {required: true, message: "公众号截图不能为空", trigger: "blur"},
          ],
        },
        rules: {
          merchant_shortname: [
            {required: true, message: "商户简称不能为空", trigger: "blur"},
            {
              min: 2,
              max: 30,
              message: "长度在 2 到 30 个字符",
              trigger: "blur",
            },
          ],
          service_phone: [
            {required: true, message: "客服电话不能为空", trigger: "blur"},
          ],

        },
      };
    },
    //计算属性
    computed: {},
    //监控data中数据变化
    watch: {},
    //方法
    methods: {
      salesScenesType() {
        debugger
        let type = null;
        if (this.form.sales_info) {
          type = this.form.sales_info.sales_scenes_type;
        }
        if (type) {
          for (let i = 0; i < type.length; i++) {
            if (type[i] == "SALES_SCENES_MINI_PROGRAM") {
              this.isApplets = true;
              if (this.mini_program_appid) {
                this.radio = "1";
              } else {
                this.radio = "2";
              }
            } else {
              this.isApplets = false;
            }
            if (type[i] == "SALES_SCENES_MP") {
              this.isPublic = true;
              if (this.mp_appid) {
                this.radio1 = "1";
              } else {
                this.radio1 = "2";
              }
            } else {
              this.isPublic = false;
            }
          }
        }
      },
      returnIndex() {
        window.scrollTo(0, 0);
        this.$emit("update:businessInfoStr", false);
        this.$emit("update:indexStr", true);
        this.$emit("getData", null);
      },
      getSubjectInfo() {
        getBusinessInfo(this.businessCodeStr).then((response) => {
          this.miniProgramPics = response.data.wechatImgVO.miniProgramPics;
          this.mpPics = response.data.wechatImgVO.mpPics;

          this.form = response.data.businessInfo;
          this.payAudit = response.data
          this.mini_program_appid = this.form.sales_info.mini_program_info.mini_program_appid;
          this.mini_program_sub_appid = this.form.sales_info.mini_program_info.mini_program_sub_appid;
          this.mp_appid = this.form.sales_info.mp_info.mp_appid;
          this.mp_sub_appid = this.form.sales_info.mp_info.mp_sub_appid;
          this.salesScenesType();
          const mediaIds = [];
          if (this.form.sales_info.mini_program_info) {
            var mini_program_pics =
              this.form.sales_info.mini_program_info.mini_program_pics;
            if (mini_program_pics) {
              mediaIds.push(mini_program_pics);
            }
          }
          if (this.form.sales_info.mp_info) {
            var mp_pics = this.form.sales_info.mp_info.mp_pics;
            if (mp_pics) {
              mediaIds.push(mp_pics);
            }
          }
          // if (mediaIds.length > 0) {
          //   getWachatImg(mediaIds).then((response) => {
          //     var data = response.data;
          //     for (let i = 0; i < response.data.length; i++) {
          //       if (
          //         data[i].mediaId ==
          //         form.sales_info.mini_program_info.mini_program_pics
          //       ) {
          //         this.wechatImg.miniProgramPics = data[i].localityUrl;
          //       }
          //       if (data[i].mediaId == orm.sales_info.mp_info.mp_pics) {
          //         this.wechatImg.mpPics = data[i].localityUrl;
          //       }
          //     }
          //   });
          // }
          //回显选择的场景
          let type = this.form.sales_info.sales_scenes_type;
          for (let i = 0; i < type.length; i++) {
            if (type[i] == "SALES_SCENES_MP") {
              this.isPublic = true;
            }
            if (type[i] == "SALES_SCENES_MINI_PROGRAM") {
              this.isApplets = true;
            }
          }
          getAppId().then((response) => {
            if (this.form.sales_info.mini_program_info.mini_program_appid == "") {
              this.mini_program_sub_appid = response.data.applet
            }
            if (this.form.sales_info.mp_info.mp_sub_appid == "") {
              this.mp_sub_appid = response.data.allwork;
            }
          })
        });
      },
      /** 提交按钮 */
      submitForm() {

        this.form.sales_info.mini_program_info.mini_program_sub_appid =
          this.mini_program_sub_appid;

        this.form.sales_info.mp_info.mp_sub_appid = this.mp_sub_appid;
        let type = new Array();
        if (this.isPublic) {
          type.push("SALES_SCENES_MP");
        }
        if (this.isApplets) {
          type.push("SALES_SCENES_MINI_PROGRAM");
        }
        console.log(this.form)
        this.form.sales_info.sales_scenes_type = type;
        this.$refs["form1"].validate((valid) => {
          if (valid) {
          }
        });
        this.formType2 = true;
        if (this.isApplets) {
          this.$refs["form2"].validate((valid) => {
            if (valid) {
            } else this.formType2 = false;
          });
        }

        if (this.isPublic) {
          this.$refs["form3"].validate((valid) => {
            if (valid) {
            } else this.formType2 = false;
          });
        }
        if (this.formType2) {
          addBusinessInfo(this.form,this.payAudit.businessCode).then((response) => {
            this.msgSuccess("新增成功");
            this.open = false;
            this.returnIndex();
          });
        }
      },
      handleAppletsChange() {
        !this.isApplets;
        // this.salesScenesType()
      },
      handlePublicChange() {
        !this.isPublic;
        // this.salesScenesType()
      },
    },
    //声明周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getSubjectInfo();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前
    beforeMount() {
    }, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //声明周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {
    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁之后
    activated() {
    }, //缓存keep-alive
  };
</script>

<style scoped>
  .icon1 {
    display: inline-block;
    background: #13ce66;
    margin-left: 5%;
    width: 5px;
    height: 16px;
    margin-right: 8px;
  }

  .headline1 {
    display: inline-block;
    font-size: 20px;
    color: #333;
    position: relative;
  }

  .icon2 {
    display: inline-block;
    background: #13ce66;
    margin-left: 5%;
    width: 5px;
    height: 16px;
    margin-right: 8px;
  }

  .headline2 {
    display: inline-block;
    font-size: 20px;
    color: #333;
    position: relative;
    margin-top: 20px;
  }

  .box-shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }

  .dev {
    margin-left: 10%;
    width: 70%;
    height: 1500px;
  }

  .dev2 {
    margin-left: 10.5%;
    margin-top: 2%;
    width: 50%;
  }

  .dev3 {
    margin-left: 6%;
    margin-top: 2%;
    width: 50%;
  }

  .dev4 {
    margin-left: 6%;
    margin-top: 2%;
    width: 50%;
  }
</style>
